import { useMemo, useState } from "react";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { Button, Card, NavBar, List, Checkbox, Tag, Toast } from "antd-mobile";
import { SubmitBar } from "react-vant";
import { useSelector, useDispatch } from "react-redux";
import { stateChange } from "../../store/TickPersonSlice";
import MyTickInfo from "../../components/MyTickInfo";
import styles from "./index.module.css";

const Index = () => {
    const [sq] = useSearchParams();
    const price = sq.get("price");
    const levelseat = sq.get("levelseat");
    // 拿到上一个页面的数据,作为订单的数据
    const { state } = useLocation();
    const navigate = useNavigate();
    //获取仓库上的乘车人数据
    const { tickPersonList } = useSelector((state) => state.TickPersonSlice);
    const dispatch = useDispatch();
    const [sitPos, setSitPos] = useState([]);
    //获取选中的乘车人数据
    const selectedPerlist = useMemo(() => {
        return tickPersonList.filter((item) => item.state);
    }, [tickPersonList]);
    //根据乘车人数量渲坐席
    const sitList = useMemo(() => {
        switch (selectedPerlist.length) {
            case 1:
                return [["A", "B", "C", "D", "E"]];
            case 2:
                return [
                    ["A", "B", "C", "D", "E"],
                    ["A", "B", "C", "D", "E"],
                ];
            case 3:
                return [
                    ["A", "B", "C", "D", "E"],
                    ["A", "B", "C", "D", "E"],
                    ["A", "B", "C", "D", "E"],
                ];
            default:
                return [];
        }
    });
    //获取最后选择的坐席位置
    const posList = useMemo(() => {
        //从后往前取，选择了几个人就取几个位置
        return sitPos.slice(-sitList.length);
    }, [sitList, sitPos]);

    //点击坐席，获取位置
    const handelGetPos = (row, ind) => {
        //row 具体的行  ind 具体的列
        setSitPos([...sitPos, { row, ind }]);
    };
    const allPrice = selectedPerlist.length * price;
    const handelSubmit = () => {
        if (selectedPerlist.length !== 0) {
            if (selectedPerlist.length !== sitPos.length)
                return Toast.show({ content: "请选择坐席", icon: "fail" });
        } else {
            return Toast.show({ content: "请选择乘车人", icon: "fail" });
        }
        navigate(`/orderconfirm?price=${allPrice}&levelseat=${levelseat}`, {
            state: state,
        });
    };
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>车次订单</NavBar>
            <Card>
                <h3 className={styles.or_title}>
                    <span>{levelseat}</span>
                    <span>¥{price}</span>
                </h3>
            </Card>
            <MyTickInfo data={state}></MyTickInfo>
            {/* 乘车相关的业务 */}
            <div className={styles.person_wrap}>
                <Button size="mini" onClick={() => navigate("/addtickperson")}>
                    选择乘车人
                </Button>
                <Card>
                    <List>
                        {selectedPerlist.map((item, ind) => (
                            <List.Item
                                key={ind}
                                description={item.code}
                                extra={
                                    <div>
                                        <Checkbox
                                            checked={item.state}
                                            onChange={() => {
                                                dispatch(stateChange(item));
                                            }}
                                        />
                                    </div>
                                }
                            >
                                {item.name}
                            </List.Item>
                        ))}
                    </List>
                </Card>
                <div>
                    {selectedPerlist.length > 0 && (
                        <Card title="选择坐席：">
                            {sitList.map((item, row) => (
                                <div key={row} className={styles.sitItem}>
                                    {item.map((it, ind) => (
                                        <Tag
                                            key={ind}
                                            color={
                                                posList.some(
                                                    (item) => item.row === row && item.ind === ind
                                                )
                                                    ? "primary"
                                                    : "default"
                                            }
                                            onClick={() => handelGetPos(row, ind)}
                                        >
                                            {it}
                                        </Tag>
                                    ))}
                                </div>
                            ))}
                        </Card>
                    )}
                </div>
            </div>
            {/* 提交订单 */}
            <SubmitBar
                price={allPrice * 100}
                buttonText="提交订单"
                onSubmit={() => handelSubmit()}
            />
        </div>
    );
};
export default Index;